<template>
  <div class="login">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-md-offset-3" style="margin-top: 50px;margin-bottom: 20px">
          <div class="well bs-component">
            <form action="">
              <span class="text-center">登录</span>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">账号</label><label class="control-label tip">{{tip}}</label>
                  <input @focus="loginInput()" @blur="loginOutput()" v-model="userAccount" type="text" placeholder="请输入用户名" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <label class="control-label">密码</label>
                  <input v-model="password" type="password" placeholder="请输入密码" class="form-control">
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox"><span>记住我</span>
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1 btn-reg">
                  <button @click="login()" class="btn btn-primary form-control">登录</button>
                  <div class="strike">
                    <span class="or">or</span>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-md-10 col-md-offset-1 btn-reg">
                  <button class="btn btn-primary form-control"><i class="fa fa-github"></i>&nbsp;&nbsp;登录&nbsp;&nbsp;Github</button>
                  <div class="login-link">
                    <router-link to="/login" class="login-link">忘记密码？</router-link>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  export default {
    data () {
      return {
        userAccount: '',
        password: '',
        tip: '',
        accountExist: false,
        apiUrlCheckUserName: 'http://localhost:8080/user/checkUserNameExist.do',
        apiUrlCheckLogin: 'http://localhost:8080/user/login.do'
      }
    },
    methods: {
      loginInput (account) {
        this.tip = ''
      },
      loginOutput () {
        axios.get(this.apiUrlCheckUserName, {
          params: {
            account: this.userAccount
          }
        }).then(response => {
          if (response.data) {
            return true
          } else {
            this.tip = '用户不存在'
            this.accountExist = false
          }
        }).catch(error => {
          alert('网络异常')
          console.log(error)
        })
      },
      login () {
//        axios.post(this.apiUrlCheckLogin, {
//          params: {
//            account: this.userAccount,
//            password: this.password
//          }
//        }).then(response => {
//          console.log(response)
//          console.log(response.data)
//        }).catch(error => {
//          console.log(error)
//        })
        axios.get(this.apiUrlCheckLogin, {
          params: {
            account: this.userAccount,
            password: this.password
          }
        }).then(response => {
          console.log(response)
          if (response.data === 1) {
            console.log(true)
          } else if (response.data === -1) {
            alert('用户不存在')
          } else if (response.data === 0) {
            alert('密码错误')
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .well
    background-color #ecf0f1
    color #636b6f
    border none
  .text-center
    text-align center
    display block
    font-size 21px
  .control-label
    font-size 14px
    padding-top 8px
    margin-top 14px
  .bs-component
    display block
    width 555px
    height 555px
  .form-control
    border 1px solid #dce4ec
    height 41px
  .form-group
    margin-left -15px
    margin-right -15px
  .btn-reg
    margin-top 20px
  .btn-primary
    background-color #34495e
    border-color #34495e
  .login-link
    margin-top 14px
    color: #555
    display block
    text-decoration none
    font-size 14px
    text-align center
  .login-link:hover
    display block
    text-decoration none
    font-size 14px
    text-align center
  .strike
    display block
    overflow hidden
    white-space nowrap
    margin-bottom 5px
    text-align center
    margin-top 15px
    font-size 20px
  .tip
    padding-left 10px
    color red
</style>
